<template>
    <section class="full-progress-loading" :class="{ absolute }" v-show="loading">
        <Progress type="circle" :width="160" :format="(p) => tip + ' ' + p + '%'" :percent="percent" />
    </section>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { Progress } from 'ant-design-vue';

export default defineComponent({
    name: 'Loading',
    components: { Progress },
    props: {
        tip: {
            type: String,
            default: ''
        },
        percent: {
            type: Number,
            default: 0
        },
        absolute: {
            type: Boolean
        },
        loading: {
            type: Boolean,
            default: false
        },
        background: {
            type: String
        }
    }
});
</script>
<style lang="less" scoped>
.full-progress-loading {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    // background-color: rgba(240, 242, 245, 0.4);

    &.absolute {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 9999;
    }
    ::v-deep(.ant-progress-text) {
        font-size: 16px;
    }
}

html[data-theme='dark'] {
    .full-loading {
        background-color: rgba(0, 0, 0, 0.4);
    }
}
</style>
